<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: gold;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: skyblue;

            /* 相对定位 */
            /* relative 是相对的意思 */
            /* 相对定位的参考点：原本的位置 */
            position: relative;
            /* top: 50px;
            left: 50px; */
            bottom: 30px;

            /* right: 50px; */
            
        }
        /* 
            相对定位特点：
                1）参考点：自己本应该出现的位置
                2）需要通过 left  right top  bottom 设置偏移量   要么使用一个，要么使用二个
                3）相对定位的元素并没有脱标，原本的位置，还是被占用着
                4）应用场景：A）局部位置调整  B）作为绝对定位的参考点
        */
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2">son2</div>
    </div>
</body>
</html>